<template>

	<view class="flex-col relative page">

		<view class="flex-col group_5 space-y-17">

			<scroll-view class="padding-12 safe-area bg-color-f7" @scrolltolower="loadList" scroll-y="true"
				style="height: 100%;">
				<view v-if="dataList.length <= 0" class="flex f-a-c f-j-c f-c">
					<view class="padding-30"></view>
					<no-data></no-data>
				</view>

				<view class="flex-col section_7 space-y-23" 	v-for="item,index in dataList" @click="go('/pages/ys/order/detail?orderNo='+order.orderNo)">
					<view>


												<div class="shop_top">
													  <!-- 左右div不能调换顺序来写 -->
													<div class="shop_left flex-col">

														<div class="shop_left_title">
															{{item.member.nickname}}
														</div>
														<div class="shop_left_info flex-row">
															<div class="shop_left_renzheng" v-if="item.member.isTansport">
																企业认证
															</div>
															<div class="shop_left_rate">
																	评分{{item.member.score }}
																   <!-- <u-rate active-color="#ffd701" inactive-color="#FEEDB5" gutter="20"  :count="count"  v-model="value"></u-rate> -->
															</div>
														</div>
													</div>
													<div class="shop_right">
														<!-- <text class="chat">联系ta</text> -->
													</div>
												</div>

										<view class="flex-row justify-between items-center"  style="padding:10px 0">
											<view class="flex-row items-center space-x-16">
												<view class="flex-col justify-start items-center text-wrapper"   v-if="order.urgentStatus == 1"><text
														class="font_4">加急</text>
												</view>
												<view class="flex-row items-center order">
													<text class="font_5 text_24">{{order.sendCity }}</text>
													<image class="shrink-0 image_5"
														src="https://qiniu.ccchongya.com/chongya/images/16947555379102027670.png" />
													<text class="font_5 text_25">{{order.receiveCity }}</text>
												</view>
											</view>
											<text class="font_6 text_26">发布时间：{{order.addTime  | time}}</text>
										</view>
										<view class="flex-col">
											<view class="flex-row items-left group_2 space-x-10">
												<image class="shrink-0 image_6"
													src="https://qiniu.ccchongya.com/chongya/images/16947555379294184525.png" />
												<view class="flex-col flex-auto group_6 space-y-8">
													<view class="flex-row justify-between">
														<text class="font_1 flex" style="flex:4">宠物类型：{{order.petType}}</text>
														<text class="font_1 flex" style="flex:3;">检疫证书：：{{order.jianyiCert?"有":'无'}}</text>
													</view>
													<view class="flex-row justify-between">
														<text class="font_1 flex" style="flex:4;">宠物体积：{{order.petVolume}}</text>
														<text class="font_1 flex" style="flex:3;">笼具大小：{{order.cageSize}}</text>
													</view>
													<view class="flex-row justify-between ">
														<text class="font_1 flex" style="flex:4;">期望运输方式：{{order.haulMethod}}</text>
														<text class="font_1 flex" style="flex:3;">接送服务：{{order.shuttle}}</text>
													</view>
												</view>
											</view>
											<view class="flex-col justify-start items-start text-wrapper_2">
												<text class="font_6 text_9">
													{{order.message}}
													</text>
											</view>

											<view class="flex-row justify-between  items-center" style="margin:20rpx 0;">
												<view class="flex-col justify-start items-start "><text class="font_3"
														@tap.stop="go('/pages/ys/order/detail')">报价范围：{{item.price_random}}</text></view>
												<view @tap.stop="selectQuote(item)" class="flex-col justify-start items-center text-wrapper_7"><text class="font_3">查看报价详情</text></view>
											</view>




										</view>
					</view>
				</view>
			</scroll-view>
		</view>



		<u-popup :show="showChaseDialog" @close="close" @open="open">





						<view class="flex-col group_4">

										<me-select ref="meSelect" :editModel="true" @change="change" @finish="finish" @itemClick="itemClick"   :datalist="currentDataList" :options="options">
														
														
											
															<!-- #ifdef MP-WEIXIN -->
															<template  v-slot:list="{slot}">
																<view class="select-item"  v-if="slot.item.price">
																	<!-- 这里可以写自己的模板 -->
																	<view class="top  flex-row justify-between items-center"  style="height:60rpx;padding:8px;margin-right:10px;font-szie:26rpx;color:#000;font-weight:bold"  >
																		<text class="name ">{{slot.item.name}} 给出价格</text>
																		<text class="price " style="margin-left:20rpx;">¥{{slot.item.price}}</text>
																		<text class="price " style="align-content:center;display: inline-block;margin-left:20rpx; background: #ffd701;padding:10px 20px;border-radius: 10px; ">选他</text>
																	</view>
																<!-- 	<view class="taps">
																		推荐指数 {{slot.slotScope.item.sellerStar}}分
																	</view> -->
																	<view class="desc">
																		{{slot.item.remark}}
																	</view>
																</view>
															</template>
															<!-- #endif -->
															<!-- #ifndef MP-WEIXIN -->
															<template v-slot:list="slot"  >
					
																<view class="select-item"  v-if="slot.slotScope.item.price">
																	<!-- 这里可以写自己的模板 -->
																	<view class="top  flex-row justify-between items-center"  style="height:60rpx;padding:8px;margin-right:10px;font-szie:26rpx;color:#000;font-weight:bold"  >
																		<text class="name ">{{slot.slotScope.item.name}} 给出价格</text>
																		<text class="price " style="margin-left:20rpx;">¥{{slot.slotScope.item.price}}</text>
																		<text class="price " style="align-content:center;display: inline-block;margin-left:20rpx; background: #ffd701;padding:10px 20px;border-radius: 10px; ">选他</text>
																	</view>
																<!-- 	<view class="taps">
																		推荐指数 {{slot.slotScope.item.sellerStar}}分
																	</view> -->
																	<view class="desc">
																		{{slot.slotScope.item.remark}}
																	</view>
																</view>
															</template>
															<!-- #endif -->
															
													 

										</me-select>

										<view class="flex f-a-c f-j-e h-50  bg-color-w padding-lr12 box-c">
											<text class=" t-color-9"></text>
											<text class=" ">总计：</text>
											<text class="text-price t-color-y margin-r12" v-if="priceId">
												<!-- {{currentQuto.prices[priceId]}} -->
												{{currentPrice}}
											</text>
											<view  class="flex f-a-c f-j-c b b-radius-30 w-100 h-36 bg-color-linear-y t-color-w" @tap.stop="pay()" >支付下单</view>
										</view>

						</view>


		</u-popup>





	</view>

</template>

<script>
		import meSelect from '@/components/me-select/me-select.vue'
		import petData from '@/config/petData.config.js';
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	export default {
		components: {
			meSelect
		},
		data() {
			return {


				currentPrice:0,
				petcatArray:petData.petcatArray,
				petTypeArray: petData.petTypeArray,
				petVolumeArray: petData.petVolumeArray,
				cageSizeArray: petData.cageSizeArray,
				shuttleArray: petData.shuttleArray,
				haulMethodArray: petData.haulMethodArray,
				addServiceMethodArray:petData.addServiceMethodArray,
				petGenderArray:petData.petGenderArray,
				petMedicineArray: petData.petMedicineArray,
				petStatusArray:	petData.petStatusArray,
				shuttleArray: petData.shuttleArray,
				pinxiangArray: petData.pinxiangArray,


						showChaseDialog: false,
						currentDataList:null,
						currentQuto:null,


				count: 5,
								value: 2,
				star: 3,
				isflag: true,
				orderNo: "",
				options: {
					editModel: true,
					flags: ['id'], //设置需要返回的参数这个参数必须在 dataList 中的item中存在（不配置默认全部返回）
					itemCanSelect: true //是否开启点击列表页选择配置
				},
				quoteId:null,
				priceId:null,
				dataList: [],
				quoteType: 0,
				showprice:{
					price:true,
					price1:true,
					price2:true,
					price3:true,
					price4:true,
					price5:true,

				},
				formData:{
					price:"",
					price1:"",
					price2:"",
					price3:"",
					price4:"",
					price5:"",
					priceDesc:"",
					orderNo:null
				},

				  // 基本案列数据
				          radiolist:
						  [
							{
								id: 1,
								name: '宠物快车',
								disabled: false,
								select: false,
								price: 0,
				            },
				            {
							  id: 2,
				              name: '铁路运输',
				              disabled: false,
							  select: false,
							  price: 0,
				            },
				            {
										id: 3,
				              name: '航空运输',
				              disabled: false,
							  select: false,

							  price: 0,
				            }, {
										id: 4,
				              name: '宠物专车',
				              disabled: false,
							  select: false,
							  price: 0,
				            },
							{
										id:5,
							  name: '普通货车',
							  disabled: false,
							  select: false,
							  price: 0,
							},
							{
										id: 6,
							  name: '顺风车',
							  disabled: false,
							  select: false,
							  price: 0,
							},

				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '苹果',


			}
		},
		onLoad(options) {
			console.log("options", options)
			this.orderNo = options.orderNo
			this.init();
		},
		methods: {
			close() {
				this.showChaseDialog = false
			},
			open() {
			    this.showChaseDialog = true
			},
			btnClick() {
				this.showChaseDialog = true
			},
			selectQuote(item){

				// console.log('selectQuote列表点击了：', item)

				this.currentQuto = item.tyQuote
				this.currentDataList =  item.price_arr
				// console.log(this.currentDataList)


				this.showChaseDialog = true;
			},

			groupChange(n) {
			  console.log('groupChange', n);
			},
			radioChange(n) {
			  console.log('radioChange', n);
			},

			changeModel() {
				this.$refs.meSelect.changeModel()
			},
			getSelectAll() {
				var result = this.$refs.meSelect.getSelectAll()
				console.log('当前全选：', result)
			},
			itemClick(e) {
				// 	console.log('列表点击了：', e)
				// console.log('列表点击了：', e)
			},
			finish(e) {
				console.log('所有的选择：', e)
			},
			change(e) {
				console.log('发生改变了：', e);
				this.priceId = e[0] ? e[0].id : null;
					console.log('发生改变了priceId：', this.priceId);


					console.log(this.currentQuto.prices[this.priceId])


					this.currentPrice = this.currentQuto.prices[this.priceId]

			},
			init() {
				let self = this;
				if (!this.isflag) {
					return
				}
				this.isflag = false;


				self.getDetail()

			},


			getDetail() {
				let self = this
				$.ajax({
					url: API.orderDetailApi,
					data: {
						orderNo: self.orderNo
					},
					method: 'GET',
					success(res) {
						self.order = res.data.order
				        self.getList();

						console.log(self.order )

						var petType_arr = [];
						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petType = petType_arr.join(",")


						var petTypes=self.order.petType.split(",")
						for (let i = 0; i < petTypes.length; i++) {
								for (let j = 0; j < self.petcatArray.length; j++) {
										if(self.petcatArray[j].id==petTypes[i]){
												petType_arr.push(self.petcatArray[j].title)
												continue;
										}
								}
						}
						self.order.petVolume = self.petVolumeArray[self.order.petVolume]
						self.order.cageSize = self.cageSizeArray[self.order.cageSize]
						// self.order.shuttle = self.shuttleArray[self.order.shuttle]
						self.order.haulMethod = self.haulMethodArray[self.order.haulMethod]
						// self.order.addServiceMethod = self.addServiceMethodArray[self.order.shuttle]




						self.order.petPhoto=self.order.petPhoto.split(",")
						self.order.cagePhoto=self.order.cagePhoto.split(",")




						self.now = res.now;
						// if(self.order.finishExpiredTime) {//自动确认收货时间
						// 	self.autoGetGoods = Number(self.order.finishExpiredTime - res.now)/1000;
						// }



						self.cancelTime = Number(res.upd_time+86400000 - res.now)/1000;



						if(self.order.payEndTime) {//超过这个时间未支付订单取消
							self.cancelTime = Number(self.order.payEndTime - res.now)/1000;
						}




						// self.getQuoteCount()


					}
				})
			},
			getList(){
					let self = this
				$.ajax({
					url: API.getQuoteListApi,
					data: {
						orderNo: self.orderNo,

					},
					method: 'GET',
					loading: true,
					loadingText: "获取报价" + ['…'],
					success(res) {
						console.log("res", res)
						let data = res.data;
						data.forEach(item => {
							item['select'] = false


							//用来获取最大值和最小值
							 let prices = []


							let price_arr  =[]

							 item['price_arr'] = self.radiolist
							 for (let key in item['price_arr']) {



								 	 switch(key) {
								 		 case '0':
								 		    item['price_arr'][key].price = item.tyQuote['price'];
								 		     break;
								 	     case '1':
								 	   	    item['price_arr'][key].price  = item.tyQuote['price1'];
								 	         break;
								 		 case '2':
								 			item['price_arr'][key].price  = item.tyQuote['price2'];
								 			 break;
								 		 case '3':
								 			item['price_arr'][key].price  = item.tyQuote['price3'];
								 			 break;
								 		 case '4':
								 			item['price_arr'][key].price  = item.tyQuote['price4'];
								 			 break;
								 		 case '5':
								 			item['price_arr'][key].price  = item.tyQuote['price5'];
								 			 break;
								 		 default:

								 	 }


									  prices.push(item['price_arr'][key].price)

							 }

								// console.log("prices",prices)
								// console.log(prices)
								let max = prices.reduce((a,b) => Math.max(a,b));;  // 5
								let min =  prices.reduce((a,b) => Math.min(a,b));  ;  // 1

								item.price_random =  min+"-"+max
								// console.log(max)
								// console.log(min)

						})



						// console.log(data.prices)
						// // let arr = [1, 2, 3, 4, 5];
						// let max = Math.max(data.prices);  // 5
						// let min = Math.min(data.prices);  // 1

						// console.log(max)

						// 	console.log(min)




						self.dataList = data;
						self.isflag = true;
					}
				})
			},
			pay() {
				let self = this;
				// if (!this.isflag) {
				// 	return
				// }



				// console.log(this.quoteId)
				// if (!this.quoteId) {
				// 	$.$toast("请选择报价");
				// 	return
				// }
				this.isflag = false;
				$.ajax({
					url: API.createPayApi,
					data: {
						quoteId: this.currentQuto.id,
						priceId:this.priceId,
						// quoteId:this.quoteId
					},
					method: 'POST',
					loading: true,
					loadingText: "选择报价" + ['…'],
					success(res) {
						let info = res.data;


						// self.go('/pages/ys/order/detail?orderNo=' + info.orderNo);
						self.go('/pages/ys/order/pay?orderNo=' + info.payOrderNo + '&amount=' + info.amount);
						self.isflag = true
					}
				})
			}
		}
	}
</script>



<style scoped lang="css">
	@import url('../../../static/css/style.css');



        .par{
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border: 2px solid darkviolet ;
            /*设置当前元素为flex模式*/
            display: flex;
            /*行元素默认不折行，设置为折行*/
            flex-wrap: wrap;

            /*设置同一列子元素在Y轴的对齐方式，
            与flex-warp搭配使用*/
            /*1.排列在当前列的最上方*/
            /*align-content: flex-start;*/
            /*2.排列在当前列的最下方*/
            /*align-content: flex-end;*/
            /*3.排列在当前列的中间位置*/
            /*align-content: center;*/
            /*4.间距相等排列，上下不留白*/
            /*align-content: space-between;*/
            /*5.间距相等排列，上下留白等于间距的一半*/
            /*align-content: space-around;*/
        }

        .rows{
            width:100%;
            height: 300px;
            font-size: 70px;
            border: 2px solid aqua;
            display: flex;

            /*设置同一行子元素在X轴的对齐方式*/
            /*1.排列在当前行的最左边*/
            /* justify-content: flex-start; */
            /*2.排列在当前行的最右边*/
            /* justify-content: flex-end; */
            /*3.排列在当前行的中间位置*/
            /* justify-content: center; */
            /*4.间距相等排列，两边不留白*/
            /* justify-content: space-between; */
            /*5.间距相等排列，两边留白等于间距的一半*/
            /* justify-content: space-around; */

            /*设置同一行子元素在Y轴的对齐方式*/
            /*1.排列在当前行的最上方*/
            /*align-items: flex-start;*/
            /*2.排列在当前行的最下方*/
            /*align-items: flex-end;*/
            /*3.排列在当前行的中间位置*/
            align-items: center;
            /*4.如果子元素没有设置高度或者设置为auto,
            将占满整个容器的高度*/
            /*align-items: stretch;*/
            /*5.以子元素第一行文字的基线对齐*/
            /*align-items: baseline;*/
        }

        .column{
            border: 2px solid greenyellow;
        }

        .col1{
            width: 50px;
            height: 50px;
            order: 5;
        }

        .col2{
            width: 60px;
            height: 60px;
            order: 4;
        }

        .col3
        {
            width: 70px;
            height: 70px;
            order: 3;
        }

        .col4
        {
            width: 80px;
            height: 80px;
            order: 2;
        }

        .col5
        {
            width: 90px;
            height: 90px;
            order: 1;
            line-height: 30px;
        }



	 				 /* 利用flex布局 */
						 /* 父元素设置flex布局 */
						 /* 左边元素宽度固定 */
						 /* 右边元素设置flex:1 */
						 /* 父元素设置flex布局 */
						        .shop_top {

						           display:flex;

								   align-items: center;
								       justify-content: space-between;
						        }
						       .shop_left {
								   flex:1;
						            /* width: 50%; */
						            /* background-color: pink; */
						        }
								.shop_left_title {
									font-weight: bold;
									font-size:34rpx;
									margin-bottom:10rpx;
								 }
								 .shop_left_info {

								}

								.shop_left_renzheng{
									border-radius: 10rpx;
									padding:4rpx 16rpx;
									color:000;
									 background:#FFD006
								}

								.shop_left_rate{
									margin-left:10px;
									border-radius: 10rpx;
									padding:4rpx 16rpx;
									color:#000;
									 background:#FFD006
								}
						        .shop_right {
									display:flex;
									color:#fff;
						            width:150rpx;
						            /* background-color: blue; */
									/* align-items: center; */
								    justify-content: center
								 }

								  .shop_right  .chat{
									  border-radius: 20rpx;
									  padding:4rpx 16rpx;
									  color:#000;
									   background:#FFD006
								}




						/* 利用grid布局 */
						/* 父元素设置 display:gird; 属性、设置gird-template-columns:300px 1fr 属性*/
						/* 表示第一列宽度始终为300px 第二列的宽度自适应 */
						/*父元素设置 display:gird; */
						/* 设置gird-template-columns:300px 1fr */
						   /*     .father {
						           display:grid;
						           height:300px;
						           grid-template-columns: 300px 1fr;
						        }
						       .left {
						            background-color: pink;
						        }
						        .right {
						             background-color: blue;
								 } */

	.page {
		padding-top: 8rpx;
		background-color: #f5f7f7;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		padding: 4rpx 12rpx 0;
	}

	.pos_2 {
		position: absolute;
		left: 12rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image {
		width: 33rpx;
		height: 20rpx;
	}

	.font_1 {
		font-size: 24rpx;
		/* line-height: 22rpx; */
		color: #666e7a;
	}

	.text {
		margin-left: 8rpx;
		color: #383838;
	}

	.image_2 {
		width: 28rpx;
		height: 20rpx;
	}

	.font_2 {
		font-size: 24rpx;
		line-height: 18rpx;
		color: #383838;
	}

	.text_2 {
		font-weight: 700;
	}

	.pos_3 {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_3 {
		width: 14rpx;
		height: 24rpx;
	}

	.text_3 {
		margin-left: 20rpx;
	}

	.image_4 {
		width: 48rpx;
		height: 23rpx;
	}

	.font_3 {
		font-size: 28rpx;
		line-height: 26rpx;
		color: #000000;
	}

	.text_4 {
		margin-top: 36rpx;
	}

	.section_2 {
		margin: 28rpx 18rpx 0;
		padding: 22rpx 4rpx 176rpx 26rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		overflow: hidden;
	}

	.space-x-16>view:not(:first-child),
	.space-x-16>text:not(:first-child),
	.space-x-16>image:not(:first-child) {
		margin-left: 32rpx;
	}

	.text-wrapper {
		padding: 12rpx 0;
		background-color: #4578ff;
		border-radius: 6rpx;
		width: 88rpx;
		height: 44rpx;
	}

	.font_4 {
		font-size: 24rpx;
		line-height: 22rpx;
		color: #ffffff;
	}

	.space-x-8>view:not(:first-child),
	.space-x-8>text:not(:first-child),
	.space-x-8>image:not(:first-child) {
		margin-left: 16rpx;
	}

	.font_5 {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #333;
	}

	.text_5 {
		line-height: 23rpx;
	}

	.image_5 {
		width: 42rpx;
		height: 16rpx;
	}

	.text_7 {
		line-height: 23rpx;
	}

	.font_6 {
		font-size: 20rpx;
		line-height: 36rpx;
		color: #333;
	}

	.text_6 {
		line-height: 20rpx;
	}

	.group_2 {
		padding-bottom: 22rpx;
	}

	.image_6 {
		border-radius: 4rpx;
		width: 120rpx;
		height: 120rpx;
	}

	.group_3 {
		margin-right: 6rpx;
	}

	.text_8 {
		margin-right: 104rpx;
	}

	.text-wrapper_2 {
		margin-right: 12rpx;
		padding: 16rpx 0;
		background-color: #ebebebd6;
		border-radius: 10rpx;
		overflow: hidden;
		/* height: 88rpx; */
	}

	.text_9 {
		margin-left: 24rpx;
		width: 586rpx;
	}

	.section_5 {
		margin: 28rpx 18rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		overflow: hidden;
		height: 518rpx;
	}

	.group_5 {
		padding-top: 28rpx;
	}

	.space-y-17>view:not(:first-child),
	.space-y-17>text:not(:first-child),
	.space-y-17>image:not(:first-child) {
		margin-top: 34rpx;
	}

	.section_7 {
		padding: 22rpx 4rpx 64rpx 26rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		overflow: hidden;
		margin-bottom: 16rpx;
	}

	.text_24 {
		line-height: 23rpx;
	}

	.text_25 {
		line-height: 23rpx;
	}

	.text_26 {
		line-height: 20rpx;
	}

	.group_6 {
		margin-right: 6rpx;
	}

	.space-y-8>view:not(:first-child),
	.space-y-8>text:not(:first-child),
	.space-y-8>image:not(:first-child) {
		margin-top: 16rpx;
	}

	.text_27 {
		margin-right: 104rpx;
	}

	.group_7 {
		padding: 36rpx 44rpx 0;
	}

	.text-wrapper_6 {
		padding: 24rpx 0;
		border-radius: 386rpx;
		width: 261rpx;
		height: 75rpx;
		border: solid 1.2rpx #00000026;
	}

	.text-wrapper_7 {
		margin-right: 8rpx;
		padding: 24rpx 0;
		background-color: #ffd701;
		border-radius: 386rpx;
		width: 260rpx;
		height: 74rpx;
	}

	.section_8 {
		padding: 36rpx 48rpx;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_8 {
		width: 56rpx;
	}

	.space-y-6>view:not(:first-child),
	.space-y-6>text:not(:first-child),
	.space-y-6>image:not(:first-child) {
		margin-top: 12rpx;
	}

	.image_8 {
		width: 40rpx;
		height: 40rpx;
	}

	.font_8 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_28 {
		color: #ffbd52;
	}

	.image_7 {
		width: 56rpx;
		height: 56rpx;
	}

	.font_9 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 19rpx;
		color: #666e7a;
	}

	.space-y-2>view:not(:first-child),
	.space-y-2>text:not(:first-child),
	.space-y-2>image:not(:first-child) {
		margin-top: 4rpx;
	}

	.image_9 {
		width: 48rpx;
		height: 48rpx;
	}

	.image_10 {
		width: 38rpx;
		height: 34rpx;
	}

	.section {
		padding: 432rpx 0 688rpx;
		background-color: #000000c9;
	}

	.pos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.section_3 {
		margin: 0 20rpx;
		padding: 40rpx 6rpx 16rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.space-y-12>view:not(:first-child),
	.space-y-12>text:not(:first-child),
	.space-y-12>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.text_10 {
		margin-left: 28rpx;
		color: #000000;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 34rpx;
	}

	.section_4 {
		margin-right: 10rpx;
		padding: 22rpx 0 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		filter: drop-shadow(0px 0px 8rpx #ffbd5208);
		overflow: hidden;
	}

	.space-y-23>view:not(:first-child),
	.space-y-23>text:not(:first-child),
	.space-y-23>image:not(:first-child) {
		margin-top: 46rpx;
	}

	.text_11 {
		line-height: 23rpx;
	}

	.text_12 {
		line-height: 23rpx;
	}

	.text_13 {
		margin-right: -8rpx;
		line-height: 20rpx;
	}

	.view {
		margin: 0 8rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.space-y-10>view:not(:first-child),
	.space-y-10>text:not(:first-child),
	.space-y-10>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.text_14 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_15 {
		margin-right: 92rpx;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_16 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_17 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_18 {
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text_19 {
		margin-right: 28rpx;
		font-size: 22rpx;
		line-height: 20rpx;
	}

	.text-wrapper_3 {
		margin-left: 4rpx;
		padding: 16rpx 0 20rpx;
		background-color: #ebebeb00;
		border-radius: 10rpx;
		overflow: hidden;
		width: 670rpx;
		height: 120rpx;
	}

	.text_20 {
		margin-left: 24rpx;

		width: 582rpx;
	}

	.group_4 {
		padding-top: 24rpx;
	}

	.section_6 {
		padding: 24rpx 28rpx;
		background-color: #f0edd542;
		border-radius: 394rpx;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #081329;
	}

	.text_21 {
		font-size: 22rpx;
		line-height: 21rpx;
	}

	.text_22 {
		font-size: 22rpx;
		line-height: 19rpx;
	}

	.text-wrapper_4 {
		margin-top: 8rpx;
		padding: 24rpx 0;
		background-color: #f0edd542;
		border-radius: 394rpx;
	}

	.text_23 {
		margin-left: 28rpx;
		font-size: 22rpx;
		line-height: 60rpx;
	}

	.text-wrapper_5 {
		margin-top: 20rpx;
		padding: 24rpx 0;
		background-color: #ffd701;
		border-radius: 386rpx;
		width: 260rpx;
	}
	.bj-price{
		display: inline-block;
		width: 300rpx;
	}
	.bj-desc{
		display: inline-block;
		width: 300rpx;
	}


</style>


<style scoped lang="css">
	/deep/ .space-y-23{
		padding:10px 20px;
	}
	/deep/  .me-select-item-wrap{
		padding:5px 0
	}
</style>
